<template>
  <div class="clearfix pc">
    <div class="header-line clearfix">
      <div class="con-width-1200 clearfix">
        <ul class="fxr r-menu">
          <li>
            <i class="fxl iconfont icon-baokan"></i>
            <router-link :to="{path: '/HospitalNewspaper', query: {'channelCode': 'HospitalNewspaper'}}">医院报刊
            </router-link>
          </li>
          <!-- <li>
            <i class="fxl iconfont icon-gongdan"></i>
            <a href="http://47.104.69.11/cms" target="_blank">管理端入口</a>
          </li> -->
        </ul>
      </div>
    </div>
    <div class="head-v3 header pos-rel" id="index">
      <div class="navigation-up clearfix">
        <div class="navigation-inner pos-rel clearfix">
          <div class="weixin pos-abs">
             <span class="fxr font">微信公众号</span>
            <img class="fxl img rad5" src="../assets/images/weixin.jpg"/>
          </div>
          <img class="fxl pos-abs logo" src="../assets/images/logo.jpg"/>
          <div class="fxr inp pos-rel">
            <i class="iconfont pos-abs icon-sousuo" @click="jump()"></i>
            <input v-model="keyWord" placeholder="请输入搜索关键词" @keydown="keydown"/>
          </div>

          <div class="clear"></div>

          <div class="navigation-v3">
            <ul>
              <!-- 默认被选中项 -->
              <li class="nav-up-selected-inpage">
                <h2>
                  <a href="/">首页</a>
                </h2>
              </li>
              <!-- <li
                :class="i.id == 1 ? 'nav-up-selected-inpage' : ''"
                v-for="i in nevigatelist"
                :key="i.index"
                :_t_nav="i.nav"
                @mouseover="showHideTree()">
                <h2>
                  <a href="#">{{ i.label }}</a>
                </h2>
              </li> -->
              <li
                  v-for="(i, index) in nevigatelist"
                  :class="index == idx ? 'nav-up-selected' : ''"
                  :key="i.index"
                  :_t_nav="i.nav"
                  @mouseenter="showTemp(index)">
                <h2>
                  <a href="#">{{ i.label }}</a>
                </h2>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="navigation-down">
        <div
            v-for="(i,index) in navdetails"
            :key="i.index"
            :id="i.id"
            :class="idx == index ? ['nav-down-menu', 'menu-1', 'nav-up-selected'] : ['nav-down-menu', 'menu-1']"
            :style="{display: idx == index ? '' : 'none'}"
            @mouseleave="hideTemp"
            :_t_nav="i.id">
          <div class="navigation-down-inner">
            <div class="fxl title">
              <H1>{{ i.label }}</H1>
              <h2>{{ i.id }}</h2>
            </div>
            <div class="fxl sub-menu">
              <ul class="clearfix">
                <li
                    v-for="item in i.childrenlist"
                    :key="item.index"
                    @mouseenter="changeActive($event)"
                    @mouseleave="removeActive($event)">
                  <div v-if="item.title != ''">
                    <span><a @click="jumpArticleList(item)">{{ item.title }}</a></span>
                    <ul>
                      <li v-for="y in item.channelList" :key="y.index">
                        <a
                            class="link"
                            href="#"
                            @click="jumpArticleList(y)"
                        >{{ y.title }}</a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clear hei20"></div>
  </div>
</template>

<script src="../assets/js/vue.min.js"></script>
<script>
  import _http from "../httpService";
  import $ from "jquery";

  export default {
    name: "Header",
    props: {},
    data() {
      return {
        keyWord: null,
        menu: [],
        /* 导航标题 */
        nevigatelist: [],
        /* 导航内明细列表 */
        navdetails: [],
        idx: -1
      };
    },
    mounted() {
    },
    methods: {
      keydown(e) {
        if (e.key == "Enter")
          this.jump()
      },

      changeActive($event) {
        $event.currentTarget.className = "hover";
      },
      removeActive($event) {
        $event.currentTarget.className = "";
      },

      showHideTree: function () {
        var qcloud = {};
        $("[_t_nav]").hover(
            function () {
              var _nav = $(this).attr("_t_nav");
              clearTimeout(qcloud[_nav + "_timer"]);
              qcloud[_nav + "_timer"] = setTimeout(function () {
                $("[_t_nav]").each(function () {
                  $(this)[
                      _nav == $(this).attr("_t_nav") ? "addClass" : "removeClass"
                      ]("nav-up-selected");
                });
                $("#" + _nav)
                    .stop(true, true)
                    .slideDown(200);
                console.log('down');
              }, 150);
            },
            function () {
              var _nav = $(this).attr("_t_nav");
              clearTimeout(qcloud[_nav + "_timer"]);
              qcloud[_nav + "_timer"] = setTimeout(function () {
                $("[_t_nav]").removeClass("nav-up-selected");
                $("#" + _nav)
                    .stop(true, true)
                    .slideUp(200);
                console.log('up');
              }, 150);
            }
        );
      },
      showTemp(index) {
        this.idx = index;
      },
      hideTemp() {
        this.idx = -1;
      },

      jump: function () {
        if (this.keyWord == "") {
          return;
        }

        this.$router.push({path: "/FullTextSearch", query: {keyWord: this.keyWord}});
      },
      jumpArticleList: function (item) {
        if (item.leaft == "1")
          this.$router.push({path: "/ArticleList", query: {channelCode: item.channelCode}});
      },
    },
    created() {
      // 初始化加载栏目等数据
      _http
          .get("/website/jcChannel/getChannelListByPc?parentCode=home")
          .then((response) => {
            console.log(response);
            this.nevigatelist = [];
            response.data.result.records.forEach((element) => {
              this.nevigatelist.push({
                label: element.channelName,
                id: element.channelNameEn,
                nav: element.channelCode,
              });
            });

            this.navdetails = [];
            response.data.result.records.forEach((element) => {
              this.navdetails.push({
                label: element.channelName,
                childrenlist: element.channelList,
                id: element.channelCode,
              });
            });
          })
          .catch((error) => console.log(error))
      // .finally(() => (this.loading = false));
    },
  };
</script>

<style lang="scss">
  @import "../assets/iconfont/iconfont.css";
  @import "../assets/css/public.css";

  .navigation-inner .weixin {
    right: -120px;text-align: center;width:90px;
  }
  .navigation-inner .weixin span.font {padding-top:3px;
    width:10px;line-height:14px;font-weight:bold;
    font-size: 12px;text-align: center;
  }
  .navigation-inner .weixin .img {
    width: 80px;
  }

  .head-v3 {
    position: relative;
    z-index: 100;
    min-width: 1200px;
  }

  .head-v3 .navigation-inner {
    margin: 0 auto;
    width: 1200px;
    position: relative;
  }

  .navigation-up {
    height: 41px;
    background: #fff;
  }

  .navigation-up .navigation-v3 {
    float: right;
    _margin-left: 10px;
  }

  .navigation-up .navigation-v3 ul {
    float: left;
  }

  .navigation-up .navigation-v3 li {
    float: left;
    font: normal 14px/41px "microsoft yahei";
    color: #333;
  }

  .navigation-up .navigation-v3 .nav-up-selected {
    background: transparent;
    color: #0eb4b6;
    border-bottom: 2px solid #0eb4b6;
    box-sizing: border-box;
  }

  .navigation-up .navigation-v3 li.nav-up-selected h2 a {
    color: #0eb4b6;
    font-weight: bold;
  }

  .navigation-up .navigation-v3 li h2 {
    font-weight: normal;
    padding: 0;
    margin: 0;
    font-size: 16px;
  }

  .navigation-up .navigation-v3 li h2 a {
    padding: 0px 15px;
    color: #333;
    display: inline-block;
    height: 41px;
    font-family: "microsoft yahei";
  }

  .navigation-down {
    position: absolute;
    top: 85px;
    left: 0px;
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .navigation-down .nav-down-menu {
    width: 100%;
    margin: 0;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
  }

  .navigation-down .nav-down-menu .navigation-down-inner {
    margin: auto;
    width: 1200px;
    position: relative;
  }

  .navigation-down-inner {
    .title {
      padding: 20px 0px 20px 0px;
      text-align: left;

      h1 {
        font-size: 25px;
        line-height: 40px;
        color: #0fb4b6;
      }

      h2 {
        font-size: 18px;
        color: #999;
        font-weight: normal;
      }
    }
  }

  .navigation-down .nav-down-menu dl {
    float: left;
    margin: 18px 80px 18px 0;
  }

  .navigation-down .sub-menu {
    width: 800px;
    text-align: left;
    font-size: 15px;
    margin: 20px 0px 50px 100px;
  }

  .navigation-down .sub-menu > ul > li {
    position: relative;
    width: 100%;
  }

  .navigation-down .sub-menu > ul > li > div > span {
    width: 180px;
    border-right: 1px solid #ddd;
    display: block;
    cursor: pointer;
    height: 100%;
    font-size: 16px;
    color: #666;
    line-height: 36px;
    padding-left: 12px;
  }

  .navigation-down .sub-menu > ul > li > div > ul {
    position: absolute;
    left: 200px;
    padding-left: 20px;
    top: 0px;
    width: 600px;
    display: none;
    z-index: 10;
  }

  .navigation-down .sub-menu > ul > li:hover > div > ul {
    display: block;
  }

  .navigation-down .sub-menu > ul > li:hover > div > ul > li > a {
    line-height: 30px;
  }

  .navigation-down .sub-menu > ul > li.hover > div > span {
    position: relative;
    color: #0fb4b6;
  }

  .navigation-down .sub-menu > ul > li.hover > div > span:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 13px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #0fb4b6;
  }

  .navigation-down .sub-menu > ul > li.hover > div > span:after {
    position: absolute;
    content: "+";
    left: 170px;
    top: 0px;
    width: 0;
    height: 0;
    font-size: 18px;
  }

  .navigation-down .sub-menu .navigation-down .menu-1 dl {
    display: block;
    width: 100%;
    margin: 0px;
  }

  .navigation-down .menu-1 dt {
    font: bold 16px "microsoft yahei";
    color: #555;
    padding-bottom: 10px;
    border-bottom: 0px solid #999;
    margin-bottom: 10px;
  }

  .navigation-down .menu-1 dd a {
    color: #555;
    font: normal 14px/30px "microsoft yahei";
  }

  .navigation-down .menu-1 dd a:hover {
    color: #60aff6;
  }

  .navigation-down .menu-2 dd a,
  .navigation-down .menu-3 dd a {
    color: #333;
    font: normal 16px "microsoft yahei";
  }

  .header-line {
    padding: 5px 0px;
    background: #f4f5f7;
    border-bottom: 1px solid #eaecef;

    .r-menu {
      li {
        float: left;
        margin-right: 20px;
        color: #a3acb8;

        i {
          margin: 2px 3px 0px 0px;
        }

        span {
          font-weight: bold;
        }
      }

      li:last-child {
        margin: 0px;
      }
    }
  }

  .header {
    padding: 10px 0px;

    .logo {
      left: 0px;
      height: 60px;
      margin: 10px 0px 5px 0px;
    }

    .menu-list {
      li {
        cursor: pointer;
        float: left;

        a {
          font-size: 16px;
          color: #404040;
          line-height: 30px;
          padding: 0px 5px;
          margin: 0px 10px;
          font-weight: 300;
        }

        a.router-link-exact-active {
          font-weight: bold;
          color: #0eb4b6;
          border-bottom: 2px solid #0eb4b6;
        }

        a:hover {
          color: #0eb4b6;
        }
      }

      li:last-child {
        padding: 0px 0px 0px 5px;
        margin: 0px 0px 0px 10px;
      }
    }

    .inp {
      input {
        display: block;
        border: 1px solid #c9d2e1;
        padding: 5px;
        color: #444;
        width: 260px;
      }

      i {
        right: 8px;
        top: 6px;
        color: #c9d2e1;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
</style>
